@import '_variables.scss';

$white:#FFF;
$gray-color:$white/3;


$bland-color:#E8BEA8;
$secondary-color: $bland-color/1.2;

//Variables
$body-bgColor:#000;
$body-padding: 2rem;
$body-bgImg:'../images/theme-one/bg.png';



$base-font-size:1rem;



$portrait-width:25%;
$portrait-height:25%;

$icon-width:50%;
$icon-height:50%;

html,
body{
    background-color: $body-bgColor;
}

#loading-bubbles{
	position:absolute;
	top:50%;
	left:50%;
	width:60px;
	margin-left:-30px;

}

.hidden{
	display:none !important;
}


.#{$namespace}wrapper{
	background-color: $body-bgColor;
	background-image: url($body-bgImg);
	//background-image: -webkit-image-set(url(../images/bg.png) 1x, url(../images/bg@2x.png) 2x, url(../images/bg@3x.png) 3x);
	background-image:url(../images/bg@2x.png);
	
	background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: $body-padding;

    //background:url(../images/cloud_block_dark.png) repeat;

    p{
    	font-size: $base-font-size * .8;
    	text-align:center;
    	max-width:80%;
    	color:$secondary-color;
    	word-spacing:1rem * .6;
    	margin-left:10%;
    }
}

#portrait {
    text-align: center;
    margin-top: 35%;

    img{
		width:$portrait-width;
		height:$portrait-height;
		border-radius: 50%;
		border:.25rem solid $bland-color;
	}

}

#profile{
	color:$bland-color;
	margin-top:1.5rem;

	p{
		line-height:180%;
	}
	hr{
		border-color:$bland-color/3;
		width:70%;
	}
}

.user{
	text-align:center;
	font-size:$base-font-size * 1.5;

	.position,
	&+p{
		font-size:$base-font-size * .8;
		color:$gray-color;
		font-weight:300;
	}

	.position{
		margin-left:$base-font-size * .5;
	}

	&+p{
		text-align:center;
		
	}
}

#socal{
	color:$secondary-color/2;
	font-size:$base-font-size * .8;
	margin-top:1rem;
	.note{
		display:block;
		
	}
	ul{
		list-style:none;
		display:flex;
		justify-content:center;
		padding:0;
	}

	li{
		line-height:150%;
		text-align:center;
		width:30%;
		border-right:1px solid $secondary-color/2;

		&:last-child{
			border-width:0;
		}
	}

	.count{
		font-size:$base-font-size * 1.5;
		font-family:"Impact";
		margin-right:.2rem;
		color:$secondary-color;
	}
}

#view-card{
	font-size:$base-font-size;
	padding:.4rem;
	width:60%;
	margin-left:20%;
	margin-top:1rem;
	margin-bottom:1rem;
	background: transparent;
    color: $secondary-color;
    border: 1px solid $secondary-color/3;
    border-radius: 5rem;

}

#link{
	color:$secondary-color/3;


	ul{
		list-style:none;
		display:flex;
		justify-content:center;
		padding:0;
	}
	li{
		line-height:300%;
		text-align:center;
		width:30%;
		height:60px;
		font-size:$base-font-size * .8;
		
	}

	.svg-icon{
		display:block;
		margin-left:25%;
	}
}

.svg-icon{
	fill: $secondary-color/3;
	width:$icon-width;
	height:$icon-height;
}


#main-wrapper{

    $nav-bgColor:#333;
    $circle-icon-width:40px;
    $icon-font-size:1rem;
    $icon-font-color:$bland-color;

    font-family:tahoma, arial, \5b8b\4f53, sans-serif;

    .user{
    	font-size:1.2rem;
    }

    a{
    	color: $secondary-color/2;
    	&:visited{
    		color: $secondary-color/2;
    	}

    	&:hover,
    	&:active,
    	&.active{
    		color:$bland-color;
    	}

    	
    }

    &.card-wrapper{
    	//background-position-y: -7rem;
    	padding:0;
    }

    #portrait{
    	margin-top:10%;
    }

    #content-wrapper{
    	position:relative;

    	.mui-scroll-wrapper{
    		margin-top:60px;
    		background:#FFF url(../images/cloud_block_gray.png) repeat;
    		margin-right:2rem;


    	}
    	.txt-info{
			display:inline-block;
			width:90%;
			padding:.5rem 1rem;
			background:#333;
			margin-left:.8rem;
			border-radius:5px;
			color:#ccc;
			font-weight:normal;
			letter-spacing:2px;

		}
    	.mui-table-view{
    		background-color: rgba(236, 236, 236, 0);
		    width: 96%;
		   // box-shadow: 0px 2px 8px 0px rgba(104, 104, 104, 0.54);
		    margin-left: 2%;
		    padding-bottom:1rem;
		    margin-bottom:1rem;
		    
		    //border-radius: 5px;
		    //min-height:200px;
		    //
		    &:before,
		    &:after{
		    	height:0;
		    }


		    .icon{
	    		font-size:$icon-font-size;
	    		color: $icon-font-color;


	    	}

	    	li{
	    		&.mui-table-view-cell{
		    		padding-top:5px;
		    		padding-bottom:5px;
		    		border-left: 4px solid #333;
				    margin-left: 30px;
				    overflow: visible;

				    &:after{
				    	height:0;
				    }

				    &>.center-btn{
				    	position:relative;
						transform: translateX(50%);
					    margin-left: 5%;
					    margin-top: 2rem;
					    background: $bland-color/3;
					    border:2px solid #FFF;
					    border-radius: 20px;
					    box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.21);
					    padding: 8px 15px;

					    &:hover{
					    	background: $bland-color/2;
					    }
				    }

				   
				}

				&:first-child,{
					padding-top:0;
				}
				&:last-child{
					padding-bottom:0;
				}


	    	}

	    	.QR-code{
	    		width: 60px;
			    height: auto;
			    margin-left: -45px;
			    border: 4px solid #333;
			    margin-bottom: -20px;
			    margin-top: 1rem;
	    	}
    	}

    	
    	

    	.icon-wrapper{
    		width:$circle-icon-width;
    		height:$circle-icon-width;
    		line-height:$circle-icon-width - 5;
    		border-radius:50%;
    		background:#333;
    		display:inline-block;
    		text-align:center;
    		margin-left: -37px;
    		border:2px solid #CCC;


    	}
		.mui-scroll{
			margin-top:2%;
			border-left:5px solid #333;
		}

		.copyright{
			color: #999;
		    width: 70%;
		    position: absolute;
		    bottom: 0rem;
		    font-size:.8rem;
		    text-align:center;

			.company{
				margin-right:1rem;
			}
		}
    	
    }

    nav{
    	background:$nav-bgColor;
    	

    	ul{
    		list-style:none;
    		display:flex;
		    justify-content:center;
		    padding:0;
		    border-bottom:1px solid $secondary-color/2;
    	}
    	li{
			line-height:150%;
			text-align:center;
			width:30%;
			border-right:1px solid $secondary-color/2;
			padding-top:10px;
			padding-bottom:5px;
			font-size:.8rem;

			&:last-child{
				border-width:0;
			}
		}

		.icon{
			font-size: 1.5rem;
			display:block;
			margin-bottom:5px;
		}
	
    }

    #senior,
    #skilled{
    	p{
			text-align:left;
			color:#333;
			font-size: 1rem;
			max-width: 98%;
		    margin-left: 1%;
		    line-height: 200%;
		    background: rgba(255, 255, 255, 0.52);
		    padding: 1rem;
    	} 
    	
    }
}





#mask{
 	position:absolute;
 	width:100%;
 	height:100%;
 	background:rgba(0, 0, 0, 0.9);
 	z-index:100;
 	display:none;

 	#QR-img{
		position:absolute;
		top:50%;
		left:50%;
		transform: translateX(-50%) translateY(-50%);

		.mui-icon-close{
			display:block;
			color:#FFF;
			text-align:center;
			margin-top:1rem;
		}

	}

	.tip{
		text-align:center;
		position:fixed;
		bottom:2rem;
		width:100%;
	}
}



